<template>
  <div class="benefits-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">🎁 权益策略管理</span>
          <el-button type="primary" @click="handleAdd">
            <el-icon><Plus /></el-icon>
            新增权益
          </el-button>
        </div>
      </template>

      <el-table :data="tableData" border stripe>
        <el-table-column prop="name" label="权益名称" width="200" />
        <el-table-column prop="level" label="适用等级" width="150">
          <template #default="{ row }">
            <el-tag v-for="l in row.levels" :key="l" size="small" style="margin-right: 5px;">
              {{ getLevelName(l) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="benefitType" label="权益类型" width="150">
          <template #default="{ row }">
            {{ getBenefitTypeName(row.benefitType) }}
          </template>
        </el-table-column>
        <el-table-column prop="value" label="权益内容" width="250">
          <template #default="{ row }">
            {{ getBenefitValue(row) }}
          </template>
        </el-table-column>
        <el-table-column prop="enabled" label="状态" width="100">
          <template #default="{ row }">
            <el-switch v-model="row.enabled" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
            <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="700px">
      <el-form :model="form" label-width="100px">
        <el-form-item label="权益名称">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="适用等级">
          <el-checkbox-group v-model="form.levels">
            <el-checkbox label="silver">银卡</el-checkbox>
            <el-checkbox label="gold">金卡</el-checkbox>
            <el-checkbox label="diamond">钻石卡</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="权益类型">
          <el-select v-model="form.benefitType">
            <el-option label="折扣优惠" value="discount" />
            <el-option label="积分倍数" value="points_multi" />
            <el-option label="免费配送" value="free_shipping" />
            <el-option label="生日礼金" value="birthday_gift" />
            <el-option label="专属客服" value="vip_service" />
          </el-select>
        </el-form-item>
        <el-form-item label="权益值" v-if="form.benefitType === 'discount'">
          <el-input-number v-model="form.discountValue" :min="0.1" :max="1" :step="0.05" :precision="2" />
          <span style="margin-left: 10px;">折（{{ (form.discountValue * 10).toFixed(1) }}折）</span>
        </el-form-item>
        <el-form-item label="积分倍数" v-if="form.benefitType === 'points_multi'">
          <el-input-number v-model="form.pointsMulti" :min="1" :max="10" :step="0.5" />
          <span style="margin-left: 10px;">倍</span>
        </el-form-item>
        <el-form-item label="生日礼金" v-if="form.benefitType === 'birthday_gift'">
          <el-input-number v-model="form.giftAmount" :min="0" />
          <span style="margin-left: 10px;">元</span>
        </el-form-item>
        <el-form-item label="启用状态">
          <el-switch v-model="form.enabled" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

const tableData = ref([
  { id: 1, name: '钻石卡折扣', levels: ['diamond'], benefitType: 'discount', discountValue: 0.85, enabled: true },
  { id: 2, name: '金卡折扣', levels: ['gold'], benefitType: 'discount', discountValue: 0.90, enabled: true },
  { id: 3, name: '双倍积分', levels: ['gold', 'diamond'], benefitType: 'points_multi', pointsMulti: 2, enabled: true },
  { id: 4, name: '免费配送', levels: ['silver', 'gold', 'diamond'], benefitType: 'free_shipping', enabled: true },
  { id: 5, name: '生日礼金', levels: ['diamond'], benefitType: 'birthday_gift', giftAmount: 200, enabled: true }
])

const dialogVisible = ref(false)
const dialogTitle = ref('新增权益')

const form = reactive({
  name: '',
  levels: [],
  benefitType: 'discount',
  discountValue: 0.95,
  pointsMulti: 1,
  giftAmount: 0,
  enabled: true
})

const getLevelName = (level) => {
  const map = { silver: '银卡', gold: '金卡', diamond: '钻石卡' }
  return map[level] || level
}

const getBenefitTypeName = (type) => {
  const map = {
    discount: '折扣优惠',
    points_multi: '积分倍数',
    free_shipping: '免费配送',
    birthday_gift: '生日礼金',
    vip_service: '专属客服'
  }
  return map[type] || type
}

const getBenefitValue = (row) => {
  if (row.benefitType === 'discount') {
    return `${(row.discountValue * 10).toFixed(1)}折优惠`
  } else if (row.benefitType === 'points_multi') {
    return `积分${row.pointsMulti}倍`
  } else if (row.benefitType === 'birthday_gift') {
    return `生日赠送¥${row.giftAmount}`
  } else if (row.benefitType === 'free_shipping') {
    return '全场包邮'
  }
  return '-'
}

const handleAdd = () => {
  dialogTitle.value = '新增权益'
  dialogVisible.value = true
}

const handleEdit = (row) => {
  dialogTitle.value = '编辑权益'
  Object.assign(form, row)
  dialogVisible.value = true
}

const handleDelete = (row) => {
  ElMessageBox.confirm('确定要删除该权益吗？', '提示', {
    type: 'warning'
  }).then(() => {
    ElMessage.success('删除成功')
  })
}

const handleSubmit = () => {
  ElMessage.success('保存成功')
  dialogVisible.value = false
}
</script>

<style scoped>
.benefits-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}
</style>

